<template>
  <div>
    <el-button type="primary" @click="openAdd(0)">新增一级分类</el-button>
    <div>
      <el-tree
          :data="categoryList"
          show-checkbox
          node-key="id"
          :expand-on-click-node="false"
          :props="defaultProps"
      >
        <template #default="{ node, data }">
        <span class="custom-tree-node">
          <el-space wrap :size="100">
            <span>{{ node.label }}</span>
          <span>
            <el-text class="mx-1" type="success" @click="openAdd(data.categoryId)" v-show="node.level<=2">新增</el-text>
            <el-divider direction="vertical" v-show="node.level<=2&&node.data.children.length==0"/>
            <el-text class="mx-1" type="danger" v-show="node.data.children.length==0"
                     @click="openDel(data)">删除</el-text>
             <el-divider direction="vertical" v-show="node.level<=2&&node.data.children.length==0"/>
            <el-text class="mx-1" type="danger" @click="openModify(data)"> 修改</el-text>
          </span>
          </el-space>
        </span>
        </template>
      </el-tree>
    </div>
    <!--  弹窗-->
    <el-dialog
        v-model="dialog"
        :title="isAdd? '新增':'修改'"
        width="40%"
        @close="addRef.resetFields()"
    >
      <div>
        <el-form :inline="true" :model="categoryForm" label-width="80" ref="addRef" :rules="rules">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="categoryForm.name" placeholder="请输入分类名称" clearable/>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="categoryForm.sort" placeholder="请输入排序值" clearable/>
          </el-form-item>
          <el-form-item label="计量单位" prop="productUnit">
            <el-input v-model="categoryForm.productUnit"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="submitCategoryForm(addRef)">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {reqAddSpuCategory, reqGetSpuCategoryTreeList, reqUpdateSpuCategory} from "@/api/serve/re-market";

let addRef = ref()
let dialog = ref(false)
let isAdd = ref(true)
let categoryForm = reactive({
  name: '',
  parentId: 0,
  productUnit: '',
  sort: '',
})

const defaultProps = {
  label: 'name',
  children: 'children'
}
let categoryList = ref([])

function openAdd(id) {
  categoryForm.parentId = id
  dialog.value = true
  isAdd.value = true
}

async function submitCategoryForm(r) {
  r.validate(async v => {
    if (v) {
      if (isAdd.value) {
        await reqAddSpuCategory(categoryForm)
      } else {
        await reqUpdateSpuCategory(categoryForm)
      }
      await getAllCategory()
      dialog.value = false
    } else return false
  })
}

onMounted(() => {
  getAllCategory()
})

function getAllCategory() {
  reqGetSpuCategoryTreeList().then(res => {
    categoryList.value = res.data
  })
}

function openModify(data) {
  categoryForm = {...data}
  isAdd.value = false
  dialog.value = true
}

function openDel(data) {
  ElMessageBox.confirm(
      `你确定要删除${data.name}吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        del(data.id)
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消成功',
        })
      })
}

function del(id) {
  delCategory(id).then(() => {
    getAllCategory()
  })
}

const rules = reactive({
  name: [
    {required: true, message: '不能为空', trigger: 'blur'},
  ],
})

</script>

<style scoped>

</style>
